@headerHeight:60rpx;
@buttonHeaderHeight:40rpx;
@tabMenuWidth:196rpx;
@tabWidth:600rpx;
@tabBgColor:#F9F16A;
.clearfix(){
    &::after{
        content: ' ';
        display: none;
        width: 0;
        height: 0;
        clear: both;
    }
}
.hidden{
    display: none !important;
}
page{
    width: 100%;
    height: 100%;
}
.index-container{
    &:extend(page);
}

.index-header{
    height: @headerHeight;
    border-bottom: 1rpx solid #e3e3e3;
}
.minx{
    float: left;
    width: 25%;
    height: 80rpx;
    line-height: 80rpx;
    color:#fff; 
    text-align: center;    
}

.index-header-left{
    &:extend(.minx);
}
.index-header-center{
    width: 50%;
    color:#333;
    line-height: @headerHeight;
    font-size: 28rpx;
    font-weight: 600;
    &:extend(.minx);
}
.dropNumber{
    width: 40rpx;
    margin:0 5rpx;
    line-height: @headerHeight*0.8;
    display: inline-block;
    background-color:#7EC6FC;
    border-radius: 8rpx;
    color:#fff;
}
.index-header-right{
    &:extend(.minx);
}
.index-header-button(){
    background-color:#FA5939;
    display: block;
    height: @buttonHeaderHeight;
    line-height: @buttonHeaderHeight;
    margin-top:(@headerHeight - @buttonHeaderHeight)/2;
    font-size: 28rpx;
    // box-shadow: 0 0 1rpx 3rpx #e3e3e3;
}
.index-header-button-left{
    .index-header-button();
    border-radius: 0 20rpx 20rpx 0;
}
.index-header-button-right{
    .index-header-button();
    border-radius: 20rpx 0 0 20rpx;    
}
.index-tab{
    width: @tabWidth;
    margin: 140rpx auto 0;
    border-radius: 12rpx;
    overflow: hidden;
}
.index-tab-menu{
    height: 50rpx;
    .clearfix()
}
.index-tab-menu-item{
    line-height: 50rpx;
    font-size: 28rpx;
    font-weight: 600;
    border-radius: 12rpx 12rpx 0 0;    
    box-sizing: border-box;
    text-align: center;
    width: @tabMenuWidth;
    float: left;
    background-color:#3A6327;
    color:#fff;
    padding: 5rpx;
}
.index-tab-menu-item-sencond{
    margin:0 (@tabWidth - @tabMenuWidth*3)/2;
}
.index-tab-menu-item.active{
    background-color:#F9F16A;
    color:#333;
}
.index-event-box{
    height: 660rpx;
    background-color:@tabBgColor;
    box-sizing: border-box;
    padding: 15rpx; 
    position: relative;   
}
.index-event-item{
    box-sizing: border-box;
    // padding: 10rpx;
    float:right;
    width: 180rpx;
    height: 200rpx;
    margin-top: 5px;   
}
.index-event-item-center{
    &:extend(.index-event-item);
    margin-right:15rpx;
    margin-left: 15rpx;
}
.porkBg{
    display: block;
    height: 180rpx;
    background-color: #fff;
}
.porkBgCenter{
    &:extend(.porkBg);
}
.controllBtn{
    position: relative;
    z-index: 2;
    background-color: @tabBgColor;
    padding-top: 16rpx;
}
.square(@length){
    width: @length;
    height: @length;
    border-radius: 50%;        
}
.controllBtn-btn{
    background-color: #EEF0ED;
    margin: 10rpx auto 0;
    .square(140rpx);
}
.controllBtn-btnbg{
    .square(160rpx);
    top: 16rpx;
    left: 50%;
    transform: translateX(-50%);
    // margin-left: -80rpx;
    z-index:-1;
    background-color: #D8E2D1;
    position: absolute;
}
.controllBtn-start{
    text-align: center;
    font-size:36rpx;
    line-height: 140rpx;
    font-weight: 700;
    color:#939391;
}

.index-event-fork{
    text-align: center;
    background: #fff;
    position: relative;
    overflow: hidden;
    top: 0;
    left: 0;
    transition: top 1s linear,left 1s linear;
}
.poker-pic{
    height: 100rpx;
}
.poker-info(){
    font-size: 22rpx; 
    line-height: 40rpx;   
}
.poker-name{
    .poker-info();
    overflow: hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-weight: 500;
}
.poker-val{
    .poker-info();    
    color:#BF3C53;
}
.index-cloak{
    width: 100%;
    height: 100%;
    background-color: rgba(33,33,33,0.3);
    position: absolute;
    z-index: 999;
}
.index-preRead{
    position: absolute;
    width: 80%;
    height: 70%;
    background-color: #fff;
    border-radius: 10rpx;
    top:20%;
    left: 10%;
    z-index: 1000;

}
.index-perheader{
    position: relative;
}
.index-perContent{
    color:#D44541;
    text-align: center;
    font-size: 46rpx;
    line-height: 80rpx;
}
.index-preBody{
    height: 700rpx;
}
.index-pertext{
    color:#777;
    font-size: 30rpx;
    text-indent: 2em;
    padding: 20rpx;
    word-break: break-all;
}
.index-perAwardList{
    padding: 10rpx 20rpx;
    background-color: #e3e3e3;
    height: 140rpx;
    margin: 10rpx;
    
    line-height: 40rpx;
    border-radius: 10rpx;
    image{
        width: 140rpx;
        height: 140rpx;
        float: left;
    }
}
.index-preListTitle{
    color:#333;
    font-size: 30rpx;
}
.index-preListPrice{
    color:#f30;
    margin-top: 10rpx;
    font-weight: 600;
}
.index-preListContent{
    float: left;
    width: 386rpx;
    padding-left: 20rpx;
    word-break: break-all;
    font-size: 36rpx;
}
.index-closeItem{
    background-color: #000;
    border-radius: 50%;
    position: absolute;
    right: 0;
    top:0;
    // transform: translate(50%);
}

.index-content{
    margin-top:130rpx;
}

.index-onlineNumber{
    height: 60rpx;
    width: 80%;
    margin: 0 auto;
    font-size: 32rpx;
    text-align: center;
    border-radius: 30rpx;
    background-color: rgba(133,133,133,.1);
    margin-top: 10rpx;
}  
.index-userGetShow{
    width: 180rpx;
    height: 40rpx;
    border-radius: 20rpx;
    overflow: hidden;
    position: absolute;
    top: 320rpx;
    background-color: red;
    z-index: 600;
}

.index-loading{
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;
}


.spinner {
    width: 200rpx;
    height: 200rpx;
    background-color: #67CF22;
    margin: 500rpx auto;
    -webkit-animation: rotateplane 1.2s infinite ease-in-out;
    animation: rotateplane 1.2s infinite ease-in-out;
  }
   
  @-webkit-keyframes rotateplane {
    0% { -webkit-transform: perspective(120px) }
    50% { -webkit-transform: perspective(120px) rotateY(180deg) }
    100% { -webkit-transform: perspective(120px) rotateY(180deg)  rotateX(180deg) }
  }
   
  @keyframes rotateplane {
    0% {
      transform: perspective(120px) rotateX(0deg) rotateY(0deg);
      -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg)
    } 50% {
      transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
      -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg)
    } 100% {
      transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
      -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
    }
  }